import CourseLayout from "@/components/course-layout";


export default function CourseChapterLayout({ children, course, title, chapters, courseId }) {

    const chapterNavs = chapters.map((chapter) => (
        <li key={chapter.id}><a href={`/course/${courseId}/chapter/${chapter.id}`}>{chapter.name}</a></li>
    ));


    return (
        <CourseLayout title={title} course={course} courseId={courseId}>
            <div className="row">
                <div className="col-2">
                    <div className="card border-light">
                        <div className="card-header">目录</div>

                        <ol className="card-body">
                            {chapterNavs}
                        </ol>
                    </div>
                </div>
                <div className="col">
                    {children}
                </div>
            </div>
        </CourseLayout>
    )
}